<template>
	<view class="setting-page">
		<!-- 列表菜单 -->
		<view class="menu-list">
			<view class="menu-group" v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
				<view class="menu-item" v-for="(item, itemIndex) in group" :key="itemIndex" @click="handleMenuItemClick(item)">
					<text class="item-label">{{ item.label }}</text>
					<u-icon name="arrow-right" color="#C7C7CC" size="16"></u-icon>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-button-wrapper">
			<view class="logout-button" @click="logout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuGroups: [
				[
					{ label: '账号与安全', action: 'account_security', url: '/pages/setting/account' },
					{ label: '商品设置', action: 'product_settings', url: '/pages/setting/product' },
					{ label: '系统参数', action: 'system_params', url: '/pages/setting/system' },
					{ label: '关于我们', action: 'about_us', url: '/pages/about/index' }
				],
				[
					{ label: '隐私协议', action: 'privacy_policy', url: '/pages/webview/index?url=privacy' }, // 示例URL
					{ label: '个人信息安全投诉、建议', action: 'feedback', url: '/pages/feedback/index' }
				],
				[
					{ label: '账号注销', action: 'delete_account', url: '/pages/setting/deleteAccount' }
				]
			]
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: '设置' });
	},
	methods: {
		handleMenuItemClick(item) {
			if (item.url) {
				uni.navigateTo({ url: item.url });
			} else {
				// 处理没有直接URL的操作，例如弹窗等
				uni.showToast({ title: '功能暂未开放', icon: 'none' });
				console.log('Clicked action:', item.action);
			}
		},
		logout() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出当前账号吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('用户确认退出');
						// 清除用户登录状态和信息
						try {
							// 假设你使用了vuex或者简单的本地存储
							// 例如: this.$store.dispatch('user/logout');
							uni.removeStorageSync('token'); // 清除token
							uni.removeStorageSync('userInfo'); // 清除用户信息
							// ... 其他需要清除的数据

							// 显示退出成功提示
							uni.showToast({
								title: '退出成功',
								icon: 'success',
								duration: 1500
							});

							// 延迟跳转，让用户看到提示
							setTimeout(() => {
								// 跳转到登录页或首页，根据你的应用逻辑决定
								uni.reLaunch({
									url: '/subPack/login/login' // 或者 '/pages/my/my'
								});
							}, 1500);

						} catch (e) {
							console.error('退出登录时出错:', e);
							uni.showToast({ title: '退出失败，请重试', icon: 'none' });
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #F6F6F6;
}

.setting-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.menu-list {
	flex: 1;
	margin-top: 20rpx;
}

.menu-group {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #F0F0F0;
	background-color: #FFFFFF;

	&:last-child {
		border-bottom: none;
	}

	.item-label {
		font-size: 30rpx;
		color: #333333;
	}
}

.logout-button-wrapper {
	padding: 40rpx 30rpx;
	padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	background-color: #F6F6F6; /* 与页面背景一致或根据需要设置 */
}

.logout-button {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 88rpx;
	background-color: #FA5151;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 12rpx;
	text-align: center;

	&:active {
		background-color: #e04545;
	}
}
</style>